<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>游戏大厅</title>
        <link rel="stylesheet" href="css/common.css">
        <link rel="stylesheet" href="css/game_hall.css">
    </head>

    <body>
    <div class="nav">五子棋对战</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen"></div>
            <!-- 匹配按钮 -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>
    </body>
<script src="js/jquery.min.js"></script>
<!--    <script src="js/jquery.min.js"></script>-->
<script>
    //游戏大厅: 获取用户信息:
    $.ajax({
        type: 'get',
        url: '/userInfo',
        success:function(result){
            let screenDiv = document.querySelector('#screen');
            screenDiv.innerHTML = "玩家: "+result.username+" 分数: "+result.score +
                "</br> 比赛场次: "+result.totalCount +" 获胜场数: "+result.winCount;
        },
        error:function(){
            alert("获取用户信息失败!");
        }
    });
    //此处处理webSocket的前端逻辑
    let websocketUrl = 'ws://' + location.host + '/findMatch';
    // let websocketUrl = 'ws://127.0.0.1:8080/findMatch';
    let websocket = new WebSocket(websocketUrl);
    websocket.onopen = function(){
        console.log("onopen");
    }
    websocket.onclose = function(){
        console.log("onclose");

    }
    websocket.onerror = function(){
        console.log("onerror");
    }
    websocket.onmessage = function(e){
        let resp = JSON.parse(e.data);
        let matchButton  =document.querySelector('#match-button');
        if(!resp.ok){
            console.log(resp.ok);
            console.log("游戏大厅收到失败响应! "+resp.reason);
            location.assign("/login.html");
            return;
        }
        if(resp.message == 'startMatch'){
            console.log("进入匹配队列!");
            matchButton.innerHTML = '匹配中...(点击停止)';
        }else if(resp.message == 'stopMatch'){
            console.log("离开匹配队列!");
            matchButton.innerHTML = '开始匹配';
        }else if(resp.message == 'matchSuccess'){
            console.log("匹配到对手,进入游戏房间!");
            location.replace('/game_room.html');
        }else if(resp.message == 'repeatConnection'){
            alert("检测到当前账号已在别的地方登录,请使用别的账号登录!");
            location.replace ('/login.html');
        } else{
            console.log("收到了非法相应!message= "+ resp.message);
        }
    }
    //给匹配按钮添加一个点击事件
    let matchButton = document.querySelector('#match-button');
    matchButton.onclick = function(){
        //确认websocket连接是否好着了:
        if(websocket.readyState == websocket.OPEN){
            if(matchButton.innerHTML == '开始匹配'){
                console.log("开始匹配");
                websocket.send(JSON.stringify({
                    message:'startMatch',
                }));
            }else if(matchButton.innerHTML == '匹配中...(点击停止)'){
                console.log("停止匹配");
                websocket.send(JSON.stringify({
                    message:'stopMatch',
                }));
            }
        }else{
            alert("当前已断开连接,请重新登录!");
            location.replace('/login.html');
        }
    }
</script>

</html>